<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { onPageScroll, onReady } from "@dcloudio/uni-app";
import TnBadge from "@tuniao/tnui-vue3-uniapp/components/badge/src/badge.vue";
import { tnNavPage } from "@tuniao/tnui-vue3-uniapp/utils";
import type { NavbarRectInfo } from "@tuniao/tnui-vue3-uniapp/components/navbar";
import PageContainer from "@/components/page-container/index.vue";
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import { useScrollTransparentNavbar } from "@/hooks";
import system from "@/api/system.js";
import user from "@/api/user.js";
import { FILE_URL } from "@/api/config.js";

const paging = ref(null);
useZPaging(paging);
// 导航栏的高度u
const navbarHeight = ref(0);
const instance = getCurrentInstance();
const state = reactive({
  chatLists: [],
  messagesUnreadTotal: {
    systemTotal: 0,
    followTotal: 0,
    replyTotal: 0,
    likeTotal: 0,
  },
});

const jumpLikePage = () => {
  // tnNavPage('/messagesPages/likelist')
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: "/messagesPages/likelist" },
    })
  );
  readMessage(0, "like");
};

const jumpFollowPage = () => {
  // tnNavPage("/minePages/fans");
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: "/minePages/fans" },
    })
  );
  readMessage(0, "follow");
};

const jumpReplyPage = () => {
  // tnNavPage("/messagesPages/replylist");
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: "/messagesPages/replylist" },
    })
  );
  readMessage(0, "reply");
};

const jumpSystemPage = () => {
  // tnNavPage("/messagesPages/systemlist");
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: "/messagesPages/systemlist" },
    })
  );
  readMessage(0, "system");
};

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance);

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height;
};

const getMessagesUnreadTotal = () => {
  system
    .messagesUnreadTotal()
    .then((res) => {
      state.messagesUnreadTotal = res.data;
    })
    .catch((err: any) => {
      console.log(err, "getMessageList");
    });
};
const queryList = (pageNo: any, pageSize: any) => {
  getMessagesUnreadTotal();
  user
    .chatLists({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      paging.value.complete(res.data);
    })
    .catch((err: any) => {
      console.log(err, "getChatLists");
      paging.value.complete(false);
    });
};

const clickMessage = (
  messageId: number,
  messageType: string,
  jumpUrl: string
) => {
  tnNavPage(jumpUrl);
  readMessage(messageId, messageType);
};
const readMessage = (messageId: number, messageType: string) => {
  system
    .readMessages({
      id: messageId,
      type: messageType,
    })
    .then((res) => {})
    .catch((err: any) => {
      console.log(err, "readMessages");
    });
};
const navUserChats = (
  otherUserId: number,
  nickname: string,
  chatsId: number
) => {
  tnNavPage(
    `/minePages/chats?receiveUserId=${otherUserId}&receiveUserNickname=${nickname}&chatsId=${chatsId}`
  );
};
onReady(() => {
  initTransparentScroll();
});

onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop);
});
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <!-- <TnNavbar
      fixed
      back-icon=""
      back-text=""
      home-icon=""
      bg-color="rgba(255, 255, 255, 0)"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      <view class="navbar">
        <view class="message"> 消 息 </view>
      </view>
    </TnNavbar> -->
    <view class="message-container">
      <!-- 方式1 start-->
      <view
        class="tn-flex message-fixed"
        :style="{ paddingTop: `${navbarHeight + 10}px` }"
      >
        <view class="category-info tn-flex-center">
          <view class="item" @click="jumpLikePage">
            <view class="icon tn-bg-image tn-gradient-bg__red-light">
              <TnIcon name="like-lack-fill" color="#ff444f" />
              <TnBadge
                v-if="state.messagesUnreadTotal.likeTotal > 0"
                :value="state.messagesUnreadTotal.likeTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">赞/喜欢</view>
          </view>
          <view class="item" @click="jumpFollowPage">
            <view class="icon tn-bg-image tn-gradient-bg__blue-light">
              <TnIcon name="my-fill" color="#3646ff" />
              <TnBadge
                v-if="state.messagesUnreadTotal.followTotal > 0"
                :value="state.messagesUnreadTotal.followTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">关注</view>
          </view>
          <view class="item" @click="jumpReplyPage">
            <view class="icon tn-bg-image tn-gradient-bg__teal-light">
              <TnIcon name="reply-fill" color="#27b93a" />
              <TnBadge
                v-if="state.messagesUnreadTotal.replyTotal > 0"
                :value="state.messagesUnreadTotal.replyTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">评论</view>
          </view>
          <view class="item" @click="jumpSystemPage">
            <view class="icon tn-bg-image tn-gradient-bg__indigo-light">
              <TnIcon name="notice-fill" color="#01beff" />
              <TnBadge
                v-if="state.messagesUnreadTotal.systemTotal > 0"
                :value="state.messagesUnreadTotal.systemTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">系统消息</view>
          </view>
        </view>
      </view>

      <view class="tn-mt-sm">
        <z-paging
          ref="paging"
          v-model="state.chatLists"
          :paging-style="{ paddingTop: `${navbarHeight + 125}px` }"
          :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true"
          @query="queryList"
        >
          <template #refresher="{ refresherStatus }">
            <CustomRefresher :status="refresherStatus" />
          </template>
          <view class="">
            <view
              v-if="state.messagesUnreadTotal.systemTotal > 0"
              class="message-bg tn-flex tn-flex-col-center"
            >
              <view class="">
                <view
                  class="item-icon tn-bg-image tn-shadow-blur"
                  style="background-color: #3c7efe"
                >
                  <view class="icon">
                    <TnIcon name="notice-fill" />
                  </view>
                </view>
              </view>
              <view class="tn-pl-sm" style="width: 62vw">
                <view class="tn-flex justify-between tn-text-ellipsis-1">
                  <view class="justify-content-item">
                    <text class="tn-text-lg"> 系统通知 </text>
                  </view>
                </view>
                <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                  <text class="tn-color-gray tn-text-sm">
                    您有新的系统消息
                  </text>
                </view>
              </view>
              <view class="" style="width: 20vw">
                <view class="tn-flex justify-end items-center">
                  <TnBadge
                    dot
                    type="danger"
                    :custom-style="{ margin: '40rpx 10rpx 0' }"
                  >
                    <text />
                  </TnBadge>
                </view>
              </view>
            </view>
            <view
              v-for="(item, index) in state.chatLists"
              :key="index"
              class="message-bg tn-flex tn-flex-col-center"
              @click="
                navUserChats(item.chatUser.id, item.chatUser.nickname, item.id)
              "
            >
              <view class="">
                <view class="logo-pic">
                  <view class="logo-image">
                    <view
                      class=""
                      :style="
                        'background-image:url(' +
                        FILE_URL +
                        item.chatUser.avatar +
                        ');width: 90rpx;height: 90rpx;background-size: cover;'
                      "
                    />
                  </view>
                </view>
              </view>
              <view class="tn-pl-sm" style="width: 62vw">
                <view class="tn-flex justify-between tn-text-ellipsis-1">
                  <view class="justify-content-item">
                    <text class="tn-text-lg">{{ item.chatUser.nickname }}</text>
                  </view>
                </view>
                <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                  <text class="tn-color-gray tn-text-sm">
                    {{ item.last_send_time }}
                  </text>
                </view>
              </view>
              <view class="" style="width: 20vw">
                <view class="tn-flex justify-end tn-mb-xs tn-mt-xs">
                  <text class="tn-color-gray tn-text-sm">{{
                    item.msg_time
                  }}</text>
                </view>
                <view
                  v-if="item.chatUser.msg_unread_total > 0"
                  class="tn-flex justify-end"
                >
                  <TnBadge
                    dot
                    type="danger"
                    :custom-style="{ margin: '10rpx 10rpx 0' }"
                  >
                    <text />
                  </TnBadge>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use "@/static/css/message.scss";
</style>
